<template>
  <div>
    <el-container>
      <!-- 侧边栏菜单 -->
      <el-menu
        router
        :default-active="$route.path"
        class="el-menu"
        @open="handleOpen"
        @close="handleClose"
         :collapse="isCollapse" 
      >
        <el-menu-item index="6" class="timu">
          <template slot="title">
             <i class="el-icon-s-platform"></i> 
            <span slot="title">五台山景区后台管理</span>
          </template>
        </el-menu-item>

        <template index=5>
            <el-menu-item index="/wts/data">
             <i class="el-icon-s-data"></i>
             <span slot="title">数据看板</span></el-menu-item>
        </template>

        <el-menu-item index="/wts/usertable">
<i class="el-icon-user"></i>
<span slot="title">用户列表</span>
            <!-- <el-menu-item index="/wts/usertable"></el-menu-item> -->
        </el-menu-item>

        <el-menu-item index="/wts/spot" :unique-opend="true">
        <i class="el-icon-s-flag"></i>
        <span slot="title">景点列表</span>
            <!-- <el-menu-item index="/wts/spot"></el-menu-item> -->
        </el-menu-item>

        <el-submenu index="3" >
          <template slot="title">
            <i class="el-icon-s-order"></i>
            <span slot="title">订单管理</span>
          </template>
          <el-menu-item-group>
            <span slot="title"></span>
            <el-menu-item index="/wts/orderform">订单列表</el-menu-item>
            <!-- <el-menu-item index="3-2">已使用</el-menu-item> -->
            <el-menu-item index="/wts/refund">退票服务</el-menu-item>
          </el-menu-item-group>
        </el-submenu>



          <el-menu-item index="/wts/notice" :unique-opend="true">
        <i class="el-icon-setting"></i>
        <span slot="title">资讯列表</span>
        </el-menu-item>

      </el-menu>

      <el-container>
        <!-- 头部 -->
        <el-header style="background: #409eff">
          <!-- 折叠收起 -->
          <el-radio-group
            v-model="isCollapse"
            style="margin-bottom: 10px; margin-top: 10px"
          >
            <el-radio-button :label="false" v-show="isCollapse">
              <i class="el-icon-s-unfold"></i>
            </el-radio-button>
            <el-radio-button :label="true" v-show="!isCollapse">
              <i class="el-icon-s-fold"></i>
            </el-radio-button>
          </el-radio-group>
  <div id="user" >欢迎尊贵的管理员大大：{{$store.state.admin}}</div>
  <el-button round id="btn" @click="gotui">退出</el-button>
        </el-header>
        <!-- 主体 -->
        <el-main class="main">
          <!-- 占位符配置二级路由 -->
           <!-- <seach-lan/> -->
           <!-- <add-spot/> -->
          <router-view />
        </el-main>


      </el-container>
    </el-container>
  </div>
</template>

<script>
// import AddSpot from '@/components/AddSpot.vue';
// import SeachLan from '@/components/SeachLan.vue';
export default {
  // components: { AddSpot },
  // components: { SeachLan },
  //接收参数
  // props:['jdlist'],
 
  //  mounted(){
  //       this.getJd()
  //     },

   methods: {
    gotui(){
this.$store.commit('logout')
if(this.$store.state.admin==undefined){
this.$router.push('/')

}

    },
          // 折叠收起
      handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    //页脚
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },

      //景点管理
      //   getJd() {
      //     const url = 'http://127.0.0.1:3000/shoplist'
      //     this.axios.get(url).then(res =>{
      //       this.data=res.data
      //       console.log(res);

      //     })  
      // },
    },
    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
         isCollapse: false,
        //  data:''
      };
    }
  
};
</script>

<style >
.el-radio-button>.el-radio-button__inner{
  border-radius: 8px !important;
}
</style>
<style lang="scss" scoped>
.el-footer {
  text-align: center;
  line-height: 60px;
}
.main {
  height: calc(100vh - 120px);
}

.el-menu:not(.el-menu--collapse) {
  // width: 200px;
  height: calc(100vh);
}

.timu {
  pointer-events: none;
  font-size: 18px;
}

/* 修改滚动条样式 */
.scroll::-webkit-scrollbar {
  width: 5px;
  /*设置滚动条的宽度*/
}
/* 滚动区域的样式 */
.scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  /*设置滚动条的圆角*/
  background: #aaa;
  /*设置滚动条的颜色*/
}
/* 滚动条的背景样式 */
.scroll::-webkit-scrollbar-track {
  border-radius: 0;
  background-color: #fff;
}
#user{
      position: absolute;
    top: 15px;
    left: 350px;
    color: white;
    font-size: 18px;
}
#btn{
      position: absolute;
    top: 10px;
    right: 30px;
}
</style>